import $ from 'jquery';
import {MenuContextUtil} from '@/components/FlowDrawer/MenuContext';
import FlowDrawerSupport from '@/components/FlowDrawer/FlowDrawerSupport';

export default {
  register(G6, graph) {
    G6.registerNode('userTask', {
      getAnchorPoints() {
        return [
          [1, 0.5],
          [0, 0.5],
        ];
      },
      drawShape(item, group) {
        const html = `<div id="${item.id}" class="user-task-node">${item.name}</div>`;
        return group.addShape('dom', {
          attrs: {
            width: 90,
            height: 50,
            html
          }
        });
      },
    }, 'single-node');

    graph.on('afterupdateitem', (e) => {
      this.bindAction(graph);
    });
    graph.on('mouseup', (e) => {
      this.bindAction(graph);
    });
    graph.on('afterrender', (e) => {
      this.bindAction(graph);
    });
  },
  bindAction(graph) {
    $('.user-task-node').off('click').on('click', (e) => {
      let menu = MenuContextUtil.createMenuItem({left: e.clientX, top: e.clientY},
        [{name: '添加节点', key: 'addNew'}, {name: '删除节点', key: 'removeNode'}], (item) => {
          if (item.key === 'addNew') {
            FlowDrawerSupport.addNewNodeAfter(e.target.id, graph);
          }
          if (item.key === 'removeNode') {
            FlowDrawerSupport.removeNode(e.target.id, graph);
          }
          menu.props.expose.close();
        });
    });
  }
};